<template>
    <div class="search_body">
        <div class="search_input">
            <div class="search_input_wrapper">
                <i class="iconfont icon-search"></i>
                <input type="text" v-model="message">
            </div>					
        </div>
        <div class="search_result">
            <h3 class="search_type">电影/电视剧/综艺</h3>
            <ul>
                <li class="movie_list" v-for="item in moviesList" :key="item.id">
                    <div class="movie_poster">
                        <img :src="item.img | setWH('128.180')">
                    </div>
                    <div class="movie_info">
                        <p>
                            <span>{{ item.nm }}</span>
                            <span>{{ item.sc }}</span>
                        </p>
                        <p>{{ item.enm }}</p>
                        <p>{{ item.cat }}</p>
                        <p>{{ item.rt }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template> 

<script>
export default {
    name: 'Search',
    data () {
        return {
            message: '',
            moviesList: []
        }
    },
    methods: {
        cancelRequest () {
            if(typeof this.source ==='function') {
                this.source('终止请求')
            }
        }
    },
    // 数据是搜索才异步加载的，computed属性不适合做异步操作
    watch: {
        message (newVal) {
            var that = this
            var cityId = this.$store.state.city.id
            this.cancelRequest() // 取消上一次请求
            this.$axios.get('/api/searchList?cityId='+ cityId +'&kw='+ newVal, { //防抖
                cancelToken:  new this.$axios.CancelToken( c => {
                    that.source = c   
                })
            })
            .then(res => {
                const msg = res.data.msg
                const moviesData = res.data.data.movies
                if(msg && moviesData) {
                    this.moviesList = moviesData.list
                }
            })
            .catch(err => {
                if (this.$axios.isCancel(err)) {
                    console.log('Rquest canceled', err.message) //请求如果被取消，这里是返回取消的message
                } 
                else {
                    // handle error
                    console.log(err)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#content {
    .search_body{ 
        flex: 1; 
        overflow: auto;
         .search_input { 
             padding: 8px 10px; 
             background-color: #f5f5f5; 
             border-bottom: 1px solid #e5e5e5;
             .search_input_wrapper { 
                 padding: 0 10px; 
                 border: 1px solid $bdColor; 
                 border-radius: 5px; 
                 background-color: #fff; 
                 display: flex; 
                 line-height: 20px;
                 i {
                     font-size: 16px; 
                     padding: 4px 0;
                     }
                input { 
                    border: none; 
                    font-size: 13px; 
                    color: #333; 
                    padding: 4px 0; 
                    outline: none; 
                    margin-left: 5px; 
                    width:100%;
                }
            }
        }
        .search_result {
            .search_type {
                font-size: 15px; 
                color: #999; 
                padding: 9px 15px; 
                border-bottom: 1px solid $bdColor;
            }
            .movie_list {
                border-bottom: 1px #c9c9c9 dashed; 
                padding: 10px 15px; 
                box-sizing: border-box; 
                display: flex;
                .movie_poster {
                    width: 60px; 
                    float: left;
                    img {
                        width: 100%;
                    }
                }
                .movie_info {
                    float: left; 
                    margin-left: 15px; 
                    flex: 1;
                    p{ 
                        height: 22px; 
                        display: flex; 
                        line-height: 22px; 
                        font-size: 12px;
                    }
                    p:nth-of-type(1) span:nth-of-type(1) { 
                        font-size: 18px; 
                        flex: 1; 
                    }
                    p:nth-of-type(1) span:nth-of-type(2) { 
                        font-size: 16px; 
                        color:#fc7103;
                    }
                }
            }
        }
    }
}
</style>
